<template>
  <div class="app-container">
    <el-row>
      <el-col :span="5">
        <!-- <div style="display: flex;margin-right: 15px;justify-content: flex-end">
          <div class="number-area">
            <div style="font-weight: 600;">答题卡</div>
            <div style="display: flex;justify-content: space-between;margin: 10px 0;">
              <div>全部 7</div>
              <div>已答 3</div>
              <div>未答 4</div>
            </div>
            <div style="display: flex;flex-wrap: wrap;">
              <div class="count-area" v-for="(item,index) in infoData.paperSubjects" :key="index">
                {{ index + 1 }}
              </div>
            </div>
          </div>
        </div> -->
      </el-col>
      <el-col :span="19">
        <div class="paper-area">
          <div class="paper-title">{{ infoData.paperName }}</div>
          <div class="paper-score">
            欢迎参加本次测试，测试共{{ infoData.duration }}分钟，满分{{ infoData.totalScore }}分，合格分数{{ infoData.passingScore }}分。
          </div>
          <div class="paper-split"></div>
          <div v-for="(item,index) in infoData.paperSubjects" :key="index" class="question-area">
            <div class="subject-name">{{ index + 1 }}.
              <span v-if="item.type==0">【单选题】</span>
              <span v-if="item.type==1">【多选题】</span>
              {{ item.subjectName }}
              <span style="color: #FF0000;">({{ item.subjectScore }}分)</span>
            </div>
            <el-radio-group v-if="item.type==0" v-model="radio[index]" @change="getChangeLabel">
              <el-radio style="display:block;margin-bottom: 10px;" v-for="(item1,index1) in item.paperSubjectOptions"
                :key="index1" :label="index1">
                {{ String.fromCharCode('A'.charCodeAt(0) + index1) + '.   ' + item1.optionName }}
              </el-radio>
            </el-radio-group>
            <el-checkbox-group v-if="item.type==1" v-model="checkList">
              <el-checkbox style="display:block;margin-bottom: 10px;" v-for="(item1,index1) in item.paperSubjectOptions"
                :key="index1"
                :label="String.fromCharCode('A'.charCodeAt(0) + index1)+'.   '+item1.optionName"></el-checkbox>
            </el-checkbox-group>
          </div>
          <div slot="footer" class="dialog-footer">
            <!--            <el-button type="primary" @click="submitForm">提交</el-button>-->
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div style="display: flex;margin-left: 15px;">
          <div class="time-area">
            <div style="padding: 0 20px 10px 20px;">答题时间还剩</div>
            <div class="time">{{ countDown }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    genPaperByPaperId,
    genPaper
  } from "@/api/business/paperInfo";

  export default {
    props: {
      type: '', //type=1，试卷进入预览；type=2，课程进入预览
    },
    data() {
      return {
        interval: null,
        infoData: {}, //试卷信息
        radio: [], //单选的选项
        checkList: [], //多选的选项
        time: null, //考试持续时间
        timeMsg: null, //考试持续时间
      }
    },
    /*watch: {
      type: function(val) {
        this.type = val
        if (this.type && this.id) {
          this.genPaper()
        }
      },
      id: function(val) {
        this.id = val
        if (this.type && this.id) {
          this.genPaper()
        }
      }
    },*/
    created() {
      // this.genPaper();
    },
    mounted() {
      clearInterval(this.time);
    },
    computed: {
      // 计算属性自动计算time,并转换为倒计时
      countDown() {
        const hour = parseInt(this.time / 3600) < 10 ? '0' + parseInt(this.time / 3600) :
          parseInt(this.time / 3600)
        const min = parseInt(this.time % 3600 / 60) < 10 ? '0' + parseInt(this.time % 3600 /
          60) : parseInt(this.time % 3600 / 60)
        const sec = parseInt(this.time % 3600 % 60) < 10 ? '0' + parseInt(this.time % 3600 %
          60) : parseInt(this.time % 3600 % 60)
        return hour + ':' + min + ':' + sec
      },
    },
    methods: {
      genPaper(paperId) {
        this.infoData = {};
        genPaperByPaperId(paperId).then(res => {
          this.infoData = res.data
          this.time = this.infoData.duration * 60 //获取分钟数
          this.showTime()
        })
      },
      getChangeLabel(val) { //获取选择题作答选项
        this.radio[this.index] = val //当前选择的序号
      },

      showTime() { //倒计时
        clearInterval(this.interval);
        this.interval = setInterval(() => {
          // if (this.time >= 0) {
          //   this.timeMsg = Math.floor(this.time / 60) + "分" + Math.floor(this.time % 60) + "秒";
          // }

          if (this.time == 5 * 60) {
            this.$message({
              showClose: true,
              type: 'error',
              message: '考生注意,考试时间还剩5分钟！！！'
            })
          }
          --this.time;
          if (this.time == 0) {
            console.log("考试时间已到,强制交卷。")
            clearInterval(this.time);
          }
        }, 1000)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dialog-footer {
    text-align: center;
    margin: 20px 0;
  }

  .app-container {
    background-color: #EEEEEF;
    height: 100vh;
  }

  .number-area {
    background-color: #FFF;
    padding: 20px;
    width: 80%;

    .count-area {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #F4F4F4;
      margin-right: 10px;
    }
  }

  .paper-area {
    background-color: #FFF;
    padding: 15px;
    height: 1000px;
    overflow-y: scroll;

    .paper-title {
      text-align: center;
      font-weight: 600;
      font-size: 17px;
      margin: 20px 0;
    }

    .paper-split {
      width: 100%;
      height: 5px;
      background-color: #53A4F4;
      margin: 15px 0;
    }

    .question-area {
      margin-bottom: 15px;

      .subject-name {
        margin-bottom: 10px;
      }

      .option-item {
        margin-left: 10px;
        margin-bottom: 10px;
      }
    }
  }

  .time-area {
    background-color: #F5FAF2;
    border: 1px solid #DFE0DF;
    padding: 10px 5px;

    .time {
      color: #7ECC5C;
      font-weight: 600;
      font-size: 16px;
      padding-top: 5px;
      text-align: center;
      border-top: 1px solid #DFE0DF;
    }
  }
</style>
